<template>
  <div id="setting-index" class="setting-index">
    <div class="panel">
      <el-card shadow="hover" @click.native="atmOpen"> <!-- 应该通过接口权限来确认展示 -->
        <i class="el-icon-wallet"></i>
        提现设置
      </el-card>
    </div>

<!--    目前采用小弹窗，后续多了再统一改-->

    <!--速率设置-->
    <el-dialog title="提现设置" :visible.sync="atm_box.show" width="456px" append-to-body>
      <el-form :model="atm_box.form" label-position="right" label-width="100px">
        <el-form-item label="提现模式">
          <el-select v-model="atm_box.form.mode">
            <el-option label="公众号" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提现应用">
          <el-select v-model="atm_box.form.app_id">
            <el-option v-for="item in option[$api.Enum.DicTypeAppList]" :label="item.name" :value="item.id" v-if="true"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="最小提现倍数" >
          <el-input v-model="atm_box.form.min_amount" @input="$tool.inputInteger(atm_box.form, 'min_amount', $event)"></el-input>
        </el-form-item>

        <el-form-item label="提现间隔">
          <el-input v-model="atm_box.form.min_interval" @input="$tool.inputInteger(atm_box.form, 'min_interval', $event)">
            <template slot="append">分钟</template>
          </el-input>
        </el-form-item>

        <el-form-item style="margin-top: 18px">
          <el-button type="primary" @click="atmSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "IotSettingIndex",
  data(){
    return{
      option:{},
      user:{},
      atm_box:{
        show:false,
        form:{
          mode: '1',
          min_amount: 1,
          min_interval: 360,
          app_id: '',
        },
      }
    }
  },
  mounted() {
    this.user = this.$tool.getUser()
    this.$api.foundation.dicListExtendCache(
        [
          this.$api.Enum.DicTypeAppList,
        ],
        {},
        res => {
          this.option = res;
        }
    );
  },
  methods:{
    // 提现 表单 显示
    atmOpen(){
      this.$api.merchant.atmDetail({id: this.user.setting.atm_id}, res =>{
        if (!res.status){
          return this.$message.error(res.message)
        }
        this.atm_box.show = true
        this.atm_box.form = {
          id: res.data.id,
          mode: res.data.mode.toString(),
          min_amount: res.data.min_amount.toString(),
          min_interval: res.data.min_interval.toString(),
          app_id: res.data.app_id ? res.data.app_id : '',
        }
      })

    },
    // 提现 表单 提交
    atmSubmit(){
      let body = this.$tool.copyJSON(this.atm_box.form)
      body.mode = Number(body.mode)
      body.app_id = Number(body.app_id)
      body.min_amount = Number(body.min_amount)
      body.min_interval = Number(body.min_interval)

      this.$api.merchant.atmSet(body, res =>{
        if (!res.status){
          return this.$message.error(res.message)
        }
        this.$message.success("设置成功.")
      })
    }
  }

}
</script>

<style lang="less" scoped>
.setting-index{
  background: #fff;
  padding: 20px;
  margin: 10px 0 0;
  height: 90%;

  .el-card{
    text-align: center;
    padding: 24px;
    font-size: 120%;
    float: left;
    cursor: pointer;
    margin: 0;

    i{
      display: block;
      font-size: 36px;
      margin-bottom: 8px;
    }
  }
}
</style>